<template>
    <div>
        <!-- 页面：Setting -->
        <page-main>
            <el-tabs tab-position="left" style="height: 600px;">
                <el-tab-pane label="基本设置" class="basic">
                    <h2>基本设置</h2>
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <el-form ref="form" :model="form" label-width="120px" label-suffix="：">
                                <el-form-item label="名 称">
                                    <el-input v-model="form.nickname" placeholder="请输入你的名称" />
                                </el-form-item>
                                <el-form-item label="电话">
                                    <el-input v-model="form.phonenumber" placeholder="请输入你的电话" />
                                </el-form-item>
                                <el-form-item label="年级">
                                    <el-input v-model="form.graduateyear" placeholder="请输入你的年级" />
                                </el-form-item>
                                <el-form-item label="学历">
                                    <el-input v-model="form.college" placeholder="请输入你的学历" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="updatePerson">保存</el-button>
                                </el-form-item> 
                            </el-form>
                        </el-col>
                        <el-col :span="8">
                            <el-upload
                                style="border: 1px solid;"
                                class="avatar-uploader"
                                action="http://localhost:8000/public/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="form.userimg" :src="form.userimg" class="avatar" style="width: 100%;">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="安全设置" class="security">
                    <h2>安全设置</h2>
                    <div class="setting-list">
                        <div class="item">
                            <div class="content">
                                <div class="title">账户密码</div>
                                <div class="desc">当前密码强度：强</div>
                            </div>
                            <div class="action">
                                <el-button type="text" @click="editPassword">修改</el-button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <div class="title">密保手机</div>
                                <div class="desc">已绑定手机：187****3441</div>
                            </div>
                            <div class="action">
                                <el-button type="text">修改</el-button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <div class="title">备用邮箱</div>
                                <div class="desc">当前未绑定备用邮箱</div>
                            </div>
                            <div class="action">
                                <el-button type="text">绑定</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
export default {
    name: 'PersonalSetting',
    beforeRouteLeave(to, from, next) { 
        if (['personalEditPassword'].includes(to.name)) {
            this.$store.commit('keepAlive/add', 'PersonalSetting')
        }
        next()
    },
    props: {},
    data() {
        return {
            form: {},
            id: ''
        }
    },
    created() {
        let id = 2
        
    },
    mounted() {
        this.id = this.$store.getters['user/uid'].id;
        this.form.uid = this.id
        this.$util.post('public/loadUserdetailByUid',{ 
            uid: this.$store.getters['user/uid'].id
        }).then(res => {
            if(res != null && res.id != undefined) {
                this.form = res
            }
        }) 
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.form.userimg = file.response;
            this.form.userimg = file.response;
            this.$util.post('public/updateUserdetailByPrimaryKey',  this.form);
            this.$message({
                message: '修改成功！',
                type: 'success'
            });
            this.$router.push({
                name: 'reload'
            })
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            
            return isJPG && isLt2M;
        },
        editPassword() {
            this.$router.push({
                name: 'personalEditPassword'
            })
        },
        updatePerson() {
            this.$util.post('public/updateUserdetailByPrimaryKey', this.form).then(res => {
                console.log(res);
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
            }, (err) => {
                this.$message.error('错了哦，这是一条错误消息')
            })
            
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs {
    .el-tabs__header .el-tabs__nav {
        .el-tabs__active-bar {
            z-index: 0;
            width: 100%;
            background-color: #e1f0ff;
            border-right: 2px solid #409eff;
        }
        .el-tabs__item {
            text-align: left;
            padding-right: 100px;
        }
    }
    .el-tab-pane {
        padding: 0 20px 0 30px;
    }
}
h2 {
    margin: 0;
    margin-bottom: 30px;
    font-weight: normal;
}
.basic {
    ::v-deep .headimg-upload {
        > div {
            text-align: center;
        }
        .el-upload-dragger {
            border-radius: 50%;
        }
    }
}
.security {
    .setting-list {
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #e8e8e8;
            .content {
                .title {
                    margin-bottom: 5px;
                    color: #666;
                }
                .desc {
                    font-size: 14px;
                    color: #999;
                }
            }
            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
</style>
